<template>
  <div>
    <view class="tabs">
      <view class="tabs_title">
        <view
          :class="item.isActive?'title_item active':'title_item'"
          v-for="(item,index) in tabs"
          :key="index"
          @click="tabsTap(index)"
        >{{item.value}}</view>
      </view>
      <!--  -->
      <view class="tabs_content">
        <!-- 插槽 -->
        <slot></slot>
      </view>
    </view>
  </div>
</template>

<script>
export default {
  props: ["tabs"],
  data() {
    return {};
  },
  methods: {
    tabsTap(index) {
      console.log("组件传出去", index);
      // 调用父组件方法,给他传个值
      this.$emit("tabsItemChange", index);
    }
  }
};
</script>
<style lang='less' scoped>
.tabs_title {
  display: flex;
  .title_item {
    background-color: #fff;
    padding: 15rpx 0;
    flex: 1;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-bottom: 3rpx solid #ccc;
  }
  .active {
    color: var(--themeColor);
    border-bottom: 5rpx solid currentColor !important;
  }
  .tabs_content {
    /* border-top: 5rpx solid #eb4450; */
    width: 100%;
  }
}
</style>
 